﻿@model HomeStayWebCP.Models.BusinessObject.PostObject
@{
    ViewBag.Title = "Step 2";
}
    <script src="/Content/FileUpload/load-image.min.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/canvas-to-blob.min.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/tmpl.min.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/Bootstrap/bootstrap.min.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/Bootstrap/bootstrap-image-gallery.min.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/jquery.fileupload.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/jquery.iframe-transport.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/jquery.fileupload-ip.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/jquery.fileupload-ui.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/locale.js?cdv=1" type="text/javascript"></script>
    <script src="/Content/FileUpload/main.js?cdv=1" type="text/javascript"></script>
    <link href="../../Content/Styles/checkboxstyle.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Styles/ErrorStyle.css" rel="stylesheet" type="text/css" />
<style>
      #container
            {
                background-color: white;
                min-height: 1300px !important;
            }
    #headbox
    {
        height: 30px;
        background-color: #c30;
        text-align: left;
        font-size: 1.5em;
        padding-left: 10px;
        color: white;
        padding-top: 5px;
    }
    .infobox
    {
        width: 1120px;
        min-height: 220px;
        margin: 0 auto;
        background-color: #D2D29F;
        margin-top: 10px;
        border-radius: 5px 5px 5px 5px;
        padding-bottom: 10px;
    }
    .leftlabel
    {
        float: left;
        width: 150px;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 1.1em;
        color: black;
    }
    .editor-field
    {
        float: left;
        margin-top: 10px;
        margin-left: 10px;
        width: 200px;
   
    }
    .field
    {
        clear: both;
    }
    #SearchHomestay
    {
        margin-top: 20px;
        margin-left: 150px;
        font-size: 1.1em;
    }
    .headerbox
    {
        width: auto;
        height: 25px;
        margin: 0 auto;
        background-color: white;
        color: brown;
        padding-left: 5px;
    }
    .checkbox
    {
        margin-left: 10px;
    }
    input, textarea
    {
        color: black !important;
       
    }
    .usdtag
    {
        float: left;
        margin-top: 15px!important;
        margin-left: -30px!important;
    }
  .field-validation-error {
      display: block;
      color: red!important;
  }
  .error {
      display: none;
      height: 7px;
width: 800px;
float: left;
margin-left: 10px;
border-radius: 5px;
      
  }
</style>
@using (Html.BeginForm("CreateStep2", "Posts", FormMethod.Post, new { enctype = "multipart/form-data", id = "submitform" }))
{
     @Html.ValidationSummary(true)
    <div id="headbox" class="rounded-corners">
        Step 2:House Detail
    </div>
      
    <div class="infobox" style="width: 350px; margin-left: 10px; float: left">
        <div class="headerbox" style="width: 345px; margin: 0">
            Price Information</div>
        <div class="field">
            <span class="leftlabel" style="width: 100px">Price Perday</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.PricePerDay, new { style = "width:150px!important", @class = "price",@required="" })
                @Html.ValidationMessageFor(model => model.House.PricePerDay)
            </div>
            <p class="usdtag">USD</p>
        </div>
        <div class="field">
            <span class="leftlabel" style="width: 100px">Price Perweek</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.PricePerWeek, new { style = "width:150px!important", @class = "price", @required = "" })
                @Html.ValidationMessageFor(model => model.House.PricePerWeek)
                
            </div>
            <p class="usdtag">USD</p>
        </div>
        <div class="field">
            <span class="leftlabel" style="width: 100px">Price Permonth</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.PricePerMonth, new { style = "width:150px!important", @class = "price", @required = "" })
                @Html.ValidationMessageFor(model => model.House.PricePerMonth)
            </div>
            <p class="usdtag">USD</p>
        </div>
    </div>
    
    <div class="infobox" style="width: 350px; margin-left: 10px; float: left">
        <div class="headerbox" style="width: 345px; margin: 0">
            House Information</div>
      
          <div class="field">
            <span class="leftlabel" style="width: 120px">No. BedRoom</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.NumBadroom, new { style = "width:140px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.NumBadroom, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel" style="width: 120px">No. Sitting Room</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.NumSittingRoom, new { style = "width:140px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.NumSittingRoom, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel" style="width: 120px">No. WC/Bathroom</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.NumOfWC, new { style = "width:140px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.NumOfWC, "", new { style = "display:none" })
            </div>
        </div>
        <div class="field">
            <span class="leftlabel" style="width: 120px">No. Storey</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.Storey, new { style = "width:140px", @class = "number", @required = "" })
                @Html.ValidationMessageFor(model => model.House.Storey, "", new { style = "display:none" })
            </div>
        </div>
    </div>
     
    <div class="infobox" style="width: 400px; margin-left: 10px; float: left">
        <div class="headerbox" style="width: 395px; margin: 0">
            More Information</div>
        <div class="field">
            <span class="leftlabel" style="width: 50px">Area</span>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.House.Area, new { style = "width:140px", @class = "price", @required = "true" })
                @Html.ValidationMessageFor(model => model.House.Area)
            </div>
            <p class="usdtag">m2</p>
        </div>
        <div id="checklist" style="clear: left; color: black;margin-left:70px">
           <div class="custom-checkbox">
               <input type="checkbox" id="House.HasGara" value="true" name="HasGara">
               <label for="House.HasGara"><span class="box"></span>Has Gara</label>
            </div>
            <div class="custom-checkbox">
             <input type="checkbox" id="House.HasGarden" value="true" name="HasGarden">
               <label for="House.HasGarden"><span class="box"></span>Has Garden</label>
            </div>
            <div class="custom-checkbox">
                <input type="checkbox" id="House.HasKitchen" value="true" name="HasKitchen">
                <label for="House.HasKitchen"><span class="box"></span>Has Kitchen</label>
            </div>
        </div>
    </div>
    //Hidden text box for transfer data
    
    <div class="editor-field">
        @Html.HiddenFor(model => model.House.ProvinceID, new { style = "width:140px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.House.DistrictID, new { style = "width:140px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.House.TypeOfHouseID, new { style = "width:140px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.House.Ordinate, new { style = "width:140px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.Title, new { style = "width:140px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.Content, new { style = "width:140px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.ContactName, new { style = "width:140px" })
    </div>
       
    <div class="editor-field">
        @Html.HiddenFor(model => model.MobilePhone, new { style = "width:140px" })
    </div>
       
    <div class="editor-field">
        @Html.HiddenFor(model => model.TelePhone, new { style = "width:240px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.Email, new { style = "width:240px" })
    </div>
    <div class="editor-field">
        @Html.HiddenFor(model => model.House.AddressDetail, new { style = "width:340px" })
    </div>
    
    <p style="display: none">
    <input type="submit" value="Submit" id="submitbutton"  style="margin-right: 10px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            float: right; margin-top: 10px; width: 100px; background-color: sienna; color: whitesmoke !important" />
</p>
<p style="display: none">
    <input type="reset" value="Reset" id="resetbutton" style="margin-right: 10px; float: right;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              margin-top: 10px; width: 100px; background-color: sienna; color: whitesmoke !important" />
   </p>
}
<div class="infobox" style="float: left; width: 1120px; height: auto; margin-left: 10px">
    <div class="Upload-Image">
        @{Html.RenderPartial("/Views/Images/Index.cshtml");}
    </div>
</div>
<div class="error"></div>
   <p>
    <input type="button" value="Submit"  onclick="Submit()" style="margin-right: 10px;float: right; margin-top: 10px; width: 100px; color: green !important;cursor: pointer;font-weight: bold" />
</p>
<p>
    <input type="button" value="Reset" onclick="Reset()" style="margin-right: 10px; float: right;margin-top: 10px; width: 100px; color: green !important;cursor: pointer;font-weight: bold" />
   </p>
<script type="text/javascript">
    var errorperday = $('#House_PricePerDay').next("span");
    var errorweek = $('#House_PricePerWeek').next("span");
    var errorpermonth = $('#House_PricePerMonth').next("span");
    function Reset() {
        $('#resetbutton').click();
        
    }

    function Submit() {
        var priceperday = parseFloat($('#House_PricePerDay').val());
        var priceperweek = parseFloat($('#House_PricePerWeek').val());
        var pricepermont = parseFloat($('#House_PricePerMonth').val());
       
        $('.error').css("display", "none");
        //Validate upload image
        if ($('.files tr td[class="start"]').length > 0) {
            $('.error').css("display", "block");
            $('.error').html("You haven't started upload image");
            return false;
        }
        //Validate upload image but not start
        if ($('.files tr').length == 0) {
            $('.error').css("display", "block");
            $('.error').html("Please upload an image for your house");
            return false;

        }
        //Validate not input price
        if (($('#House_PricePerDay').val() == '' && $('#House_PricePerWeek').val() == '' && $('#House_PricePerMonth').val() == ''
        ) || (priceperday == 0 && priceperweek == 0 && pricepermont == 0)) {
            $('.error').css("display", "block");
            $('.error').html("Please input price");
            return false;
        }
        //validate lenth of price
       //Validate  price
        if (priceperday > 0 && priceperweek > 0 && pricepermont>0) {
            if (priceperday >= priceperweek || priceperday >= pricepermont || priceperweek >= pricepermont) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per day < price per week < price per month");
                return false;
            }
        }
        //Validate  price
        if (priceperday > 0 && priceperweek > 0) {
            if (priceperday >= priceperweek ) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per day < price per week ");
                return false;
            }
        }
        //Validate  price
        if (priceperday > 0 && pricepermont > 0) {
            if (priceperday >= pricepermont) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per day < price per month ");
                return false;
            }
        }
        //Validate  price
        if (priceperweek > 0 && pricepermont > 0) {
            if (priceperweek >= pricepermont) {
                $('.error').css("display", "block");
                $('.error').html("Price must be follow price per week < price per month ");
                return false;
            }
        }
            
        $('#submitbutton').click();

            
            
       
       
       
    }
    //on focus function
    $('#House_PricePerDay').focus(function () {
        if ($('#House_PricePerDay').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_PricePerDay').keydown(function () {
        var price = parseInt($(this).val()).toString();
        var len = price.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);
                        
        }
    });
            
               
    $('#House_PricePerWeek').focus(function () {
        if ($('#House_PricePerWeek').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_PricePerWeek').keydown(function () {
        var price = parseInt($(this).val()).toString();
        var len = price.length;

        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }

    });
    $('#House_PricePerMonth').focus(function () {
        if ($('#House_PricePerMonth').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_PricePerMonth').keydown(function () {
        var price = parseInt($(this).val()).toString();
        var len = price.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }
    });
    $('#House_NumBadroom').focus(function () {
        if ($('#House_NumBadroom').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_NumBadroom').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_NumSittingRoom').focus(function () {
        if ($('#House_NumSittingRoom').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_NumSittingRoom').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_NumOfWC').focus(function () {
        if ($('#House_NumOfWC').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_NumOfWC').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_Storey').focus(function () {
        if ($('#House_Storey').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_Storey').keydown(function () {
        var len = this.value.length;
        if (len >= 4) {
            this.value = this.value.substring(0, 4);

        }
    });
    $('#House_Area').focus(function () {
        if ($('#House_Area').val() == "0") {
            $(this).val("");
        }
    });
    $('#House_Area').keydown(function () {
        var len = this.value.length;
        if (len >= 10) {
            this.value = this.value.substring(0, 10);

        }
    });
    //on blur function
    $('#House_PricePerDay').blur(function () {
        if ($('#House_PricePerDay').val() == "") {
            $(this).val("0");
            $(errorperday).css('display', 'none');

        }
        if (parseFloat($('#House_PricePerDay').val()) == 0) {
            $(this).val("0");
        } else {
            $(errorperday).css('display', 'block');
        }
    });



    $('#House_PricePerWeek').blur(function () {
        if ($('#House_PricePerWeek').val() == "") {
            $(this).val("0");
            $(errorweek).css('display', 'none');
        }
        if (parseFloat($('#House_PricePerWeek').val()) == 0) {
            $(this).val("0");
        }
        else {
            $(errorweek).css('display', 'block');
        }
    });
    $('#House_PricePerMonth').blur(function () {
        if ($('#House_PricePerMonth').val() == "") {
            $(this).val("0");
            $(errorpermonth).css('display', 'none');
        }
        if (parseFloat($('#House_PricePerMonth').val()) == 0) {
            $(this).val("0");
        } else {
            $(errorpermonth).css('display', 'block');
        }
    });

    $('#House_NumBadroom').blur(function () {
        if ($('#House_NumBadroom').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_NumSittingRoom').blur(function () {
        if ($('#House_NumSittingRoom').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_NumOfWC').blur(function () {
        if ($('#House_NumOfWC').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_Storey').blur(function () {
        if ($('#House_Storey').val() == "") {
            $(this).val("0");
        }
    });
    $('#House_Area').blur(function () {
        if ($('#House_Area').val() == "") {
            $(this).val("0");
        }
    });
    $('.price').keydown(function (event) {
        if (event.shiftKey) {
            event.preventDefault();
        }
        if (event.keyCode == 190 || event.keyCode == 8 || event.keyCode==46 || event.keyCode == 9) {
        }
        else {

            if (event.keyCode < 95) {
                if (event.keyCode < 48 || event.keyCode > 57) {
                                
                    event.preventDefault();
                               
                }
            } else {
                if (event.keyCode < 96 || event.keyCode > 105) {
                               
                    event.preventDefault();
                                
                }
            }
        }

    });
    $('.number').keydown(function (event) {
        if (event.shiftKey) {
            event.preventDefault();
        }
        if (event.keyCode == 8 || event.keyCode == 9) {
        }
        else {

            if (event.keyCode < 95) {
                if (event.keyCode < 48 || event.keyCode > 57) {

                    event.preventDefault();

                }
            } else {
                if (event.keyCode < 96 || event.keyCode > 105) {

                    event.preventDefault();

                }
            }
        }

    });

</script>
